<template>
    <div>
        <div class="ls_maincont"></div>
        <div class="mainDiv fpl_c">
            <div class="r">
                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span>A层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">A1</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">A2</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">A3</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">A4</div>
                        </div>
                    </div>
                </div>
                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span>B层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">B1</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">B2</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">B3</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">B4</div>
                        </div>
                    </div>
                </div>




            </div>
            <div class="r">
                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span>C层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">C1</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">C2</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">C3</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">C4</div>
                        </div>
                    </div>
                </div>

                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span>D层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">D1</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">D2</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">D3</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal"></div>
                                <div class="wendutiao_text">
                                    <span>100</span>
                                    <span>75</span>
                                    <span>50</span>
                                    <span>25</span>
                                    <span>0</span>
                                </div>
                            </div>
                            <div class="zhu_down">D4</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="stage_t">
            <a href="#"></a>
            <h1  >1号锅炉燃烧数字化与低负荷稳燃监测管理系统</h1>
            <div>
                <span></span>
                <span id="todayTimer">{{ nowTime }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { formatTime } from "../utils/date.js";
const nowTime = ref("");
import { postmeifenapi } from "../api/meifen.js";
onMounted(() => {
    setInterval(() => {
        nowTime.value = formatTime(new Date());
    });
    // 调用
    tuxing();
})
 


let tuxing = async () => {
    const res = await postmeifenapi();
    const tuxingData = res.data
    // 转化为key为location字段的map，便于准确识别和使用
    const dataMap = {}
    tuxingData.forEach(item => {
        dataMap[item.location] = item
    });
    // 遍历所有元素，依据location识别并赋值
    const elArr = document.getElementsByClassName("wendutiao_react")
    for (let index = 0; index < elArr.length; index++) {
        const el = elArr[index];
        // 找到location，并依据location识别并赋值
        const location = el.parentElement.parentElement.getElementsByClassName("zhu_down")[0].innerText
        // 煤粉分配率
        let distribution = dataMap[location].distribution
        distribution = Math.min(100, Math.ceil(distribution))
        el.style.height = `${distribution}%`
    }
};


</script>

<style lang="scss" scoped></style>